import React,{ Component } from 'react'
import { connect } from 'react-redux'
import { Button,message,Affix } from 'antd'
import DeleteModal from './Tools/DeleteModal'
import NewDirModal from './Tools/NewDirModal'
import MCModal from './Tools/MCModal'
import UploadModal from './Tools/UploadModal'

const Group = Button.Group

class Tools extends Component {
  constructor(props){
    super(props)
    this.style = {
      'position':'fixed',
      'bottom':0
    }
    this.state = {
      _move:false,
      _upload:false,
      _newDir:false,
      _delete:false,
      _trash:false
    }
  }

  trash = () => {
    this.setState({
      _trash : true
    })
  }

  trashOk = () => {
    this.setState({
      _trash : false
    })
  }

  upload = () => {
    this.setState({
      _upload : true
    })
  }

  uploadOk = () => {
    this.setState({
      _upload : false
    })
  }

  move = () => {
    if (this.props.stack.dirs.length !== 0 || this.props.stack.files.length !== 0) {
      this.setState({
        _move : true
      })
    }else {
      message.warning('未选中任何文件或文件夹！')
    }
  }

  moveOk = () => {
    this.setState({
      _move : false
    })
  }

  moveCancel = () => {
    this.setState({
      _move : false
    })
  }

  newDir = () => {
    this.setState({
      _newDir : true
    })
  }

  newDirOk = () => {
    this.setState({
      _newDir : false
    })
  }

  newDirCancel = () => {
    this.setState({
      _newDir : false
    })
  }

  delete = () => {
    if (this.props.stack.dirs.length !== 0 || this.props.stack.files.length !== 0) {
      this.setState({
        _delete : true
      })
    }else {
      message.warning('未选中任何文件或文件夹！')
    }
  }

  deleteOk = () => {
    this.setState({
      _delete : false
    })
  }

  deleteCancel = () => {
    this.setState({
      _delete : false
    })
  }



  render(){
    const count = action => {
      return <p>您确定要{action}{this.props.stack.dirs.length}个文件夹,{this.props.stack.files.length}个文件?</p>
    }
    return(
      <div style={this.style}>
      <Affix  offsetTop={500}>
      <Group>
      <Button type="dashed" onClick={this.upload} ghost>上传</Button>
      <Button type="dashed" onClick={this.newDir} ghost>新建文件夹</Button>
      <Button type="dashed" onClick={this.move} ghost>移动</Button>
      <Button type="dashed" onClick={this.delete} ghost>删除</Button>
      <Button type="dashed" onClick={this.trash} ghost disabled>回收站</Button>
      </Group>
      <DeleteModal
      visible={this.state._delete}
      ok={this.deleteOk}
      cancel={this.deleteCancel}
      count={count}
      parent={this.props.parent}
      dispatch={this.props.dispatch}
      stack={this.props.stack}
      />
      <NewDirModal
      visible={this.state._newDir}
      ok={this.newDirOk}
      cancel={this.newDirCancel}
      parent={this.props.parent}
      dispatch={this.props.dispatch}
      />
      <MCModal
      visible={this.state._move}
      count={count}
      action={'移动'}
      ok={this.moveOk}
      cancel={this.moveCancel}
      parent={this.props.parent}
      dispatch={this.props.dispatch}
      rootDir={this.props.rootDir}
      Dirs={this.props.Dirs}
      stack={this.props.stack}
      />
      <UploadModal
      visible={this.state._upload}
      ok={this.uploadOk}
      dispatch={this.props.dispatch}
      parent={this.props.parent}
      token={this.props.token}
      />
      </Affix>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    Dirs: state.disk.Dirs,
    rootDir: state.disk.rootDir.directory,
    parent: state.disk.Node.directory,
    dirs : state.disk.Node.dirs,
    files : state.disk.Node.files,
    token : state.home.token
  }
}

export default connect(mapStateToProps)(Tools)
